<template>
	<view class="page-root">
		<view class="container">
			<view class="desc-box">
			上传您爱宠的安全资料，如犬证、疫苗证明等，有利于在参与活动时保障您和其他宠友与爱宠的安全，上传后您的宠物将获得专属标识，帮助您更便捷的参与活动哦！（我们承诺对您的爱宠信息进行保密）
			</view>
			<view class="form-box">
			<view class="form-tips">请填写安全认证信息</view>
			<view class="form-ipt">
				<view class="name">宠物主姓名</view>
				<input class="ipt" type="text" v-model="formData.name" placeholder="请填写证件上的姓名" />
			</view>
			<view class="form-ipt">
				<view class="name">{{petType==1 ? "犬品种" : "猫咪品种"}}</view>
				<input class="ipt" type="text" v-model="formData.breeds"  placeholder="请填写证件上的品种名" />
			</view>
			<view class="form-ipt">
				<view class="name">所属街道</view>
				<view class="ipt" hover-class="tap-hover" @click="openRegionSelector">
					<view class="uni-input">{{ regionText }}</view>
				</view>
			</view>
			<view class="form-upload-box" v-if="petType==1">
				<view class="cret-name">养犬登记证<text class="note">（上传其中一证）</text></view>
				<view class="cret-tips">请上传养犬登记证信息页</view>
				<view class="upload-box">
					<image-upload @change="dogCertImg" :image-arr="formData.dog_cert_img ? [formData.dog_cert_img] : []"></image-upload>
				</view>
				<view class="cret-number">登记证号：{{formData.dog_cert_no}}</view>
			</view>
			<view class="form-upload-box" v-if="petType==1">
				<view class="cret-name">免疫证<text class="note">（上传其中一证）</text></view>
				<view class="cret-tips">请上传疫苗证信息页</view>
				<view class="upload-box">
					<image-upload @change="vaccineImg" :image-arr="formData.vaccine_cert_img ? [formData.vaccine_cert_img] : []"></image-upload>
				</view>
				<view class="cret-number">疫苗证号：{{formData.vaccine_cert_no}}</view>
			</view>
			<view class="form-upload-box" v-if="petType==2">
				<view class="cret-name">疫苗记录</view>
				<view class="cret-tips">请上传疫苗记录信息页</view>
				<view class="upload-box">
					<image-upload @change="vaccineImg" :image-arr="formData.vaccine_cert_img ? [formData.vaccine_cert_img] : []"></image-upload>
				</view>
			</view>
			<view class="form-upload-box" v-if="petType==2">
				<view class="cret-name">其他相关证件（选填）</view>
				<view class="cret-tips">请上传其他信息<text class="note1">（最多4张）</text></view>
				<view class="images-list">
					<view class="img-wrapper" v-for="(img, index) in images" :key="index">
						<uni-icons class="del-ico" type="minus-filled" :size="24" color="#dd524d"
							@click="delImage(index)"></uni-icons>
						<image class="img" :src="img.url" mode="aspectFill"></image>
						<view class="percent-mask" v-if="img.fail || img.progress < 100">
							<text v-if="!img.fail">{{ img.progress }}%</text>
							<text v-if="img.fail" @click="uploadAgain(index)">点击重试</text>
						</view>
					</view>
					<view class="add-btn" v-if="images.length <= 4" hover-class="tap-hover" @click="addImage()">
						<uni-icons type="plusempty" :size="30" color="#02C9BF"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box"></view>
		<fixed-footer>
			<primary-btn title="完成" @btnClick="check()"></primary-btn>
		</fixed-footer>
		<uni-popup ref="checkPopup" type="center" :is-mask-click="false">
			<view class="popup-content">
				<view class="close-btn"  @click="closePop"></view>
				<view class="title">核对安全认证</view>
				<view class="info-box">
					<view class="tips">安全认证信息：</view>
					<view class="base-info">
						<view class="name">宠物主姓名：</view>
						<view class="val">{{formData.name}}</view>
					</view>
					<view class="base-info">
						<view class="name">{{petType==1 ? "犬品种" : "猫咪品种"}}：</view>
						<view class="val">{{formData.breeds}}</view>
					</view>
					<view class="base-info">
						<view class="name">所属街道：</view>
						<view class="val">{{regionText}}</view>
					</view>
					<view v-if="petType==1">
						<view class="cert-box" v-if="formData.dog_cert_img!=''">
							<view class="name">养犬登记证：</view>
							<view class="img-box"  :style="'background-image:url('+formData.dog_cert_img+')'" @click="previewImage(formData.dog_cert_img)"></view>
						</view>
						<view class="cert-box" v-if="formData.vaccine_cert_img!=''">
							<view class="name">免疫证：</view>
							<view class="img-box"  :style="'background-image:url('+formData.vaccine_cert_img+')'" @click="previewImage(formData.vaccine_cert_img)"></view>
						</view>
					</view>
					<view v-else>
						<view class="cert-box">
							<view class="name">疫苗记录：</view>
							<view class="img-box"  :style="'background-image:url('+formData.dog_cert_img+')'" @click="previewImage(formData.dog_cert_img)"></view>
						</view>
					</view>
				</view>
				<view class="ft-box">
					<view class="cancel-btn" @click="closePop">修改信息</view>
					<view class="sub-btn" @click="addVerify">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 地区选择弹窗：省/市/区县/镇乡/街道 五级 -->
		<uni-popup ref="regionPopup" type="bottom" :is-mask-click="true">
			<view class="region-popup">
				<view class="region-header">
					<view class="region-path">
						<text v-for="(n, idx) in selectedRegionNames" :key="idx" class="region-path-item" @click="jumpToLevel(idx)">{{ n }}</text>
						<text v-if="selectedRegionNames.length === 0" class="region-path-placeholder">请选择省份</text>
					</view>
					<view class="region-actions">
						<text class="region-cancel" @click="$refs.regionPopup.close()">取消</text>
					</view>
				</view>
				<scroll-view class="region-list" scroll-y>
					<view class="region-item" v-for="item in currentLevelItems" :key="item.id" @click="selectRegionItem(item)">
						<text class="region-item-text">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				petType:1,
				formData:{
					id:0,
					pet_id:0,
					type:0,
					name:'',
					breeds:'',
					dog_cert_img:'',
					vaccine_cert_img:'',
					vaccine_cert_no:'',
					dog_cert_no:'',
					province_id:0,
					city_id:0,
					area_id:0,
					town_id:0,
					street_id:0,
					address_detail:'',
				},
				images: [], // 图片临时路径
				online_imgs: [], // 上传成功的图片路径
				region: [],
				customItem: '',
				// 模拟地区数据：省/市/区县/镇乡/街道 五级
				regionTree:[],
				// regionTree: [
				// 	{
				// 		id: 31, name: '上海市', children: [
				// 			{ id: 3101, name: '上海市辖区', children: [
				// 				{ id: 310112, name: '闵行区', children: [
				// 					{ id: 31011201, name: '古美路街道', children: [
				// 						{ id: 3101120101, name: '古美西路社区' },
				// 						{ id: 3101120102, name: '万源路社区' }
				// 					] },
				// 					{ id: 31011202, name: '虹莘路街道', children: [
				// 						{ id: 3101120201, name: '银都路社区' },
				// 						{ id: 3101120202, name: '虹梅南路社区' }
				// 					] }
				// 				] }
				// 			] }
				// 		]
				// 	},
				// 	{
				// 		id: 32, name: '江苏省', children: [
				// 			{ id: 3201, name: '南京市', children: [
				// 				{ id: 320102, name: '玄武区', children: [
				// 					{ id: 32010201, name: '玄武湖街道', children: [
				// 						{ id: 3201020101, name: '湖滨社区' },
				// 						{ id: 3201020102, name: '后宰门社区' }
				// 					] }
				// 				] }
				// 			] }
				// 		]
				// 	}
				// ],
				currentLevelItems: [],
				selectedRegionNodes: [],
				levelIndex: 0,
			}
		},
		onLoad(options) {
			this.getCityData();
			if (options.petId) {
				this.formData.pet_id = options.petId;
		    }
			if (options.petType) {
				this.formData.type = options.petType;
				this.petType = options.petType;
			}
			if (options.certId) {
				//获取档案详情
				this.formData.id =options.certId;
				this.detail(options.certId);
			}
		},
		computed: {
			regionText() {
				if (!this.selectedRegionNodes || this.selectedRegionNodes.length === 0) {
					return '请选择省/市/区县/镇乡/街道';
				}
				return this.selectedRegionNodes.map(n => n.name).join(' ');
			},
			selectedRegionNames(){
				return (this.selectedRegionNodes || []).map(n => n.name);
			}
		},
		methods: {
			previewImage(url) {
				uni.previewImage({urls:[url]})
			},
			openRegionSelector(){
				this.currentLevelItems = this.regionTree;
				this.selectedRegionNodes = [];
				this.levelIndex = 0;
				this.$refs.regionPopup.open();
			},
			jumpToLevel(index){
				// 回退到某一级
				if(index < 0 || index >= this.selectedRegionNodes.length){
					return;
				}
				this.levelIndex = index;
				this.selectedRegionNodes = this.selectedRegionNodes.slice(0, index);
				this.currentLevelItems = index === 0 ? this.regionTree : (this.selectedRegionNodes[index-1].children || []);
			},
			selectRegionItem(item){
				this.selectedRegionNodes.push(item);
				if(item.children && item.children.length > 0 && this.selectedRegionNodes.length < 5){
					this.currentLevelItems = item.children;
					this.levelIndex += 1;
				} else {
					// 选到最后一级或无子级，完成选择
					const ids = this.selectedRegionNodes.map(n => n.id);
					this.formData.province_id = ids[0] || 0;
					this.formData.city_id = ids[1] || 0;
					this.formData.area_id = ids[2] || 0;
					this.formData.town_id = ids[3] || 0;
					this.formData.street_id = ids[4] || 0;
					this.$refs.regionPopup.close();
				}
			},
			async detail(cert_id) {
				const res = await this.$request.get('api/pet/cert_detail', {cert_id:cert_id})
				if (res.code == 200) {
					this.formData.id = res.data.id;
					this.formData.pet_id = res.data.pet_id;
					this.formData.type = res.data.type;
					this.formData.name = res.data.name;
					this.formData.breeds = res.data.breeds;
					this.formData.dog_cert_img = res.data.dog_cert_img;
					this.formData.dog_cert_no = res.data.dog_cert_no;
					this.formData.vaccine_cert_img = res.data.vaccine_cert_img;
					this.formData.vaccine_cert_no = res.data.vaccine_cert_no;
                    this.formData.province_id = res.data.province_id;
					this.formData.city_id = res.data.city_id;
					this.formData.area_id = res.data.area_id;
					this.formData.town_id = res.data.town_id;
					this.formData.street_id = res.data.street_id || 0;
					// 获取详情后，重新初始化选中状态
					this.initSelectedRegion();
				}
			},
			async ocr(url,type) {
				const res = await this.$request.post('api/ocr/general', {url:url})
				if (res.code == 200) {
					if (type==1) { //狗证
						this.formData.dog_cert_no = res.data.id_card;
					}
					if (type==2) { //疫苗证
						this.formData.vaccine_cert_no = res.data.id_card;
					}
				}
			},
			async getCityData() {
				const res = await this.$request.get('/api/city/datas')
				if (res.code == 200) {
					this.regionTree = res.data;
					// 获取城市数据后，初始化选中状态
					this.initSelectedRegion();
				}
			},
			// 根据formData中的id值初始化选中状态
			initSelectedRegion() {
				if (!this.regionTree || this.regionTree.length === 0) {
					return;
				}
				
				const ids = [
					this.formData.province_id,
					this.formData.city_id,
					this.formData.area_id,
					this.formData.town_id,
					this.formData.street_id
				].filter(id => id && id !== 0);
				
				if (ids.length === 0) {
					return;
				}
				
				this.selectedRegionNodes = [];
				let currentLevel = this.regionTree;
				let found = true;
				
				for (let i = 0; i < ids.length && found; i++) {
					found = false;
					for (let j = 0; j < currentLevel.length; j++) {
						if (currentLevel[j].id === ids[i]) {
							this.selectedRegionNodes.push(currentLevel[j]);
							currentLevel = currentLevel[j].children || [];
							found = true;
							break;
						}
					}
				}
				
				// 设置当前显示层级
				if (this.selectedRegionNodes.length > 0) {
					this.levelIndex = this.selectedRegionNodes.length - 1;
					this.currentLevelItems = this.selectedRegionNodes[this.levelIndex].children || [];
				} else {
					this.levelIndex = 0;
					this.currentLevelItems = this.regionTree;
				}
			},
			async addVerify() {
				if(this.formData.dog_cert_no == '' && this.formData.vaccine_cert_no == '') {
					uni.showToast({
						title: "养犬登记证/免疫证必须上次其中之一",
						icon: 'none',
					});
					return 
				}
				const res = await this.$request.post('api/pet/create_cert', this.formData)
				if (res.code == 200) {
					let text= this.formData.id ==0 ? "创建成功" : "更新成功";
					let that = this;
					uni.showToast({
						title: text,
						icon: 'none',
						success() {
							that.$refs.checkPopup.close();
							uni.navigateTo({
								url: '/pages/cwdn/verifyed?certId='+res.data.id
							});
						}
					});
				}
			},
			check() {
				this.$refs.checkPopup.open();
			},
			bindRegionChange(e) {
				const val = e.detail && e.detail.value ? e.detail.value : [];
				this.region = val;
				this.formData.province = val[0] || '';
				this.formData.city = val[1] || '';
				this.formData.district = val[2] || '';
			},
			closePop(){
				this.$refs.checkPopup.close();
			},
			dogCertImg(images) {
				this.formData.dog_cert_img = images != false ? images[0] : '';
				if (this.formData.dog_cert_img !=''){
					this.ocr(this.formData.dog_cert_img, 1);
				}
			},
			vaccineImg(images) {
				this.formData.vaccine_cert_img = images != false ? images[0] : '';
				if (this.formData.vaccine_cert_img !=''){
					this.ocr(this.formData.vaccine_cert_img, 2);
				}
			},
			// 添加图片
			addImage() {
				const count = 9 - this.images.length
				uni.chooseMedia({
					count: count,
					mediaType: ['image'],
					success: async (res) => {
						let temp = []
						const oldLength = this.images.length
						const tempFilePaths = res.tempFiles
						for await (const item of tempFilePaths) {
							if (item.size / 1024 / 1024 > 10) {
								uni.showToast({
									title: '图片不能超过10MB',
									icon: 'none'
								})
							} else {								
								temp.push(item.tempFilePath)
								this.images.push({
									url: item.tempFilePath,
									fail: false,
									progress: 0
								})
							}
						}
						if (temp == false) {
							return
						}
						let j = 0
						for await (let item of temp) {
							try {
								const res = await this.$request.upload('/api/file/upload', {
									filePath: item
								}, {
									load: false,
								}, (progress) => {
									this.images[j + oldLength].progress = progress
								})
								if (res.code == 200) {
									this.online_imgs.push(res.data.url)
									this.images[j + oldLength].fail = false
									this.images[j + oldLength].progress = 100
								} else {
									this.images[j + oldLength].fail = true
									this.images[j + oldLength].progress = 0
								}
							} catch {
								this.images[j + oldLength].fail = true
								this.images[j + oldLength].progress = 0
							}
							j += 1
						}
					}
				})
			},
			// 删除图片
			delImage(index) {
				this.images.splice(index, 1)
				this.online_imgs.splice(index, 1)
			},			
			// 上传失败的图片点击重新上传
			uploadAgain(index) {
				this.images[index].fail = false			
				this.$request.upload('/api/file/upload',
				{
					filePath: this.images[index].url
				}, 
				{
					load: false,
				}, (progress) => {
					this.images[index].progress = progress
				}).then(res => {
					if (res.code == 200) {
						this.online_imgs.splice(index, 0, res.data.url)
						this.images[index].progress = 100
						this.images[index].fail = false
					} else {
						this.images[index].fail = true
						this.images[index].progress = 0
					}
				}).catch(err => {
					this.images[index].fail = true
					this.images[index].progress = 0
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.empty-box{
	width: 686rpx;
	height: 250rpx;
}
.popup-content {
	position: relative;
	width: 606rpx;
	height: 1092rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	overflow: hidden;
	padding-bottom: 156rpx;
	.close-btn{
		position:absolute;
		width: 32rpx;
		height: 32rpx;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-close-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		right:30rpx;
		top:30rpx;
	}
	.ft-box{
		position: absolute;
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		bottom: 0rpx;
		left: 0rpx;
		.cancel-btn{
			width: 252rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 70rpx;
			border: 3rpx solid #00CAC0;
			margin-top:40rpx;
			margin-left: 40rpx;
			margin-right: 22rpx;
			float: left;
			font-weight: 400;
			font-size: 32rpx;
			color: #00CAC0;
			line-height: 76rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.sub-btn{
			width: 252rpx;
			height: 76rpx;
			background: #00CAC0;
			border-radius: 40rpx;
			margin-top:40rpx;
			float: left;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
			line-height: 76rpx;
		}
	}
	.title {
		width: 494rpx;
		height: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #262626;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 0 auto;
		margin-top:48rpx;
		margin-bottom:40rpx;
	}

	.info-box{
		width: 542rpx;
		height: 800rpx;
		margin:0 auto;
		overflow-y:auto;
		.tips{
			width: 252rpx;
			height: 46rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.cert-box{
			width: 542rpx;
			height: auto;
			margin:0 auto;
			margin-top: 40rpx;
			.name{
				width: 216rpx;
				height: 46rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.img-box{
				margin-top:24rpx;
				width: 542rpx;
				height: 288rpx;
				background-position: center center;
				background-repeat: no-repeat;
				-webkit-background-size:cover;
				-moz-background-size:cover;
				background-size:cover;
			}
		}
		.base-info{
			width: 542rpx;
			height: 38rpx;
			margin:0 auto;
			margin-top: 32rpx;
			.name {
				width: auto;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				float: left;
			}
			.val{
				width: auto;
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				text-align: right;
				font-style: normal;
				text-transform: none;
				float: right;
			}
		}
	}
}
.region-popup{
	background: #FFFFFF;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	max-height: 70vh;
	overflow: hidden;
	.region-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		.region-path{
			flex: 1;
			.region-path-item{
				margin-right: 16rpx;
				font-size: 28rpx;
				color: #00CAC0;
			}
			.region-path-placeholder{
				font-size: 28rpx;
				color: #7B7B7B;
			}
		}
		.region-actions{
			.region-cancel{
				font-size: 28rpx;
				color: #7B7B7B;
			}
		}
	}
	.region-list{
		max-height: 60vh;
		padding: 0 24rpx 24rpx 24rpx;
		.region-item{
			padding: 24rpx 0;
			border-bottom: 1px solid rgba(0,0,0,0.06);
			.region-item-text{
				font-size: 30rpx;
				color: #262626;
			}
		}
	}
}
.container{
	.desc-box{
		width: 686rpx;
		height: auto;
		font-weight: 400;
		font-size: 26rpx;
		color: #7B7B7B;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-radius: 24rpx;
		background: #fff;
		margin: 0 auto;
		margin-top:16rpx;
	}
	.form-upload-box{
		.images-list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			row-gap: 20rpx;
			column-gap: 20rpx;
			margin-top:24rpx;
			margin-left:24rpx;
		
			.add-btn {
				height: 208rpx;
				border-radius: 30rpx;
				background-color: #f6f6f6;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		
			.img-wrapper {
				height: 208rpx;
				border-radius: 30rpx;
				// overflow: hidden;
				position: relative;
		
				.del-ico {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 3;
				}
		
				.img {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
		
				.percent-mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, .5);
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
					border-radius: 30rpx;
				}
			}
		
		}
		.cret-name{
			width: auto;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top:38rpx;
			margin-left: 24rpx;
			.note {
				width: 208rpx;
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #00CAC0;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

		}
		.cret-tips{
			width: auto;
			height: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 24rpx;
			margin-top:24rpx;
			.note1{
				width: 146rpx;
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.upload-box{
			margin-left: 24rpx;
			margin-top:24rpx;
		}
		.cret-number{
			width: auto;
			height: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 24rpx;
			margin-top:32rpx;
		}
	}
	.form-box{
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin:0 auto;
		margin-top:32rpx;
		padding-bottom: 40rpx;
		overflow: hidden;
		.form-tips{
			width: auto;
			height: 42rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 24rpx;
			margin-top:40rpx;
		}
		.form-ipt {
			.name {
				width: 150rpx;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 24rpx;
				margin-top:32rpx;
			}
			.ipt {
				margin-top:32rpx;
				width: 622rpx;
				text-align: left;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				font-style: normal;
				text-transform: none;
				padding-bottom: 16rpx;
				margin-left: 24rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
		}
	}
}
</style>
